<template>
  <div class="kg-container">
    <div class="input">
      <textarea v-model="text" class="input-textarea"></textarea>
    </div>
    <div class="action">
      <el-form :inline="true" class="search-form">
        <el-form-item class="form-input">
          <el-select v-model="extractMode" placeholder="请选择">
            <el-option
              v-for="item in extractModelList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getEntityData"
            :loading="isExtracting"
            >自动抽取</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clearText()">清空内容 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="result" v-loading="isExtracting">
      <extractDataShower :result="result"></extractDataShower>
    </div>
  </div>
</template>
<script>
import extractDataShower from "./components/extractDataShower.vue";
export default {
  name: "acquireKnowledge",
  components: {
    extractDataShower,
  },
  data: () => {
    return {
      text: "",
      extractModelList: [],
      extractMode: "",
      resultId: "",
      result: {
        entities: [],
        relations: [],
        tokens: [],
      },
      isExtracting: false,
    };
  },
  computed: {},
  created() {
    // 获取抽取模型列表
    this.getExtractModel();
  },
  methods: {
    // 清空内容
    clearText() {
      this.$confirm("是否清空以上内容？清空后无法恢复。", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.text = "";
          this.$message.success("已清空");
        })
        .catch((err) => {
          this.$message.info("已取消清空");
        });
    },

    getExtractModel() {
      this.$api.knowledgeGeneration.getKAModel().then((res) => {
        const { code, data, message } = res.data;
        if (code !== 200) {
          console.error(res);
          this.$message.error(message);
          return;
        }
        this.extractModelList = data.map((extractMode) => ({
          id: extractMode.id,
          title: extractMode.modelName,
        }));
      });
    },
    getEntityData() {
      if (!this.extractMode) {
        this.$message.error("请选择抽取模型");
        return;
      }
      this.isExtracting = true;
      const params = {
        text: this.text,
        modelId: this.extractMode,
      };
      this.$api.knowledgeGeneration
        .inputExtract(params)
        .then((res) => {
          const { code, data, message } = res.data;
          if (code !== 200) {
            console.log(message);
            this.$message.error(message);
            return;
          }
          this.result = data.result;
          console.log(data);
        })
        .finally(() => (this.isExtracting = false));
    },
  },
};
</script>
<style lang="scss" scoped>
.kg-container {
  padding: 20px;
  background: #ffffff;
  border-radius: 4px;
}
.input-textarea {
  width: calc(100% - 40px);
  border-radius: 4px;
  border: 1px solid #d7d7d7;
  height: 200px;
  margin: 10px;
  padding: 10px;
}
.action {
  display: flex;
  justify-content: flex-end;
}
.result {
  padding: 20px 0;
}
</style>
